<template>
	<view class="port-detail">
		<!-- 使用率 -->
		<view class="port-usage">
			<view class="usage-text">端口使用率</view>
			<view class="usage-value">
				<text class="value-num">{{occupyRate}}</text>
				<text class="value-unit">%</text>
			</view>
		</view>
		<!-- 设备端口图 -->
		<view class="device-port">
			<view
				v-if="modelInfo"
				class="device-scale-box"
				:style="{ width: scaleObj.deviceWidth + 'px', height: scaleObj.deviceHeight + 'px', transform: 'scale(' + scaleObj.scale + ')' }"
			>
				<image class="model-img" :src="baseUrl + modelInfo.imageUrl" mode="widthFix"></image>
				<view
					class="port-img-box"
					v-for="port in portList"
					:key="port.id"
					:style="{ left: port.locationX + 'px', top: port.locationY + 'px', transform: `rotate(${port.direction == 'top' ? 180 : 0}deg)` }"
				>
					<image class="port-img" :src="getPortImg(modelInfo.portType, port)" mode="widthFix" />
				</view>
			</view>
			<!-- 全屏按钮 -->
			<view v-if="deviceData.deviceType != 5" class="full-screen" @click="handleFullScreen()">
				<image class="screen-icon" src="../../static/images/device/full_screen.png" mode=""></image>
				全屏
			</view>
		</view>
		<!-- 端口状态标识 -->
		<view class="status-list">
			<view class="status-item" v-for="item in statusList" :key="item.value">
				<view class="status-sign" :style="{ backgroundColor: item.color }"></view>
				{{ item.name }}
			</view>
		</view>
		<!-- 全屏端口图 -->
		<view v-show="showFull" class="full-box" :style="{ left: fullObj.left * -1 + 'px', top: fullObj.left + 'px' }">
			<view class="device-name">{{ deviceData.name }}</view>
			<view class="full-content">
				<view
					v-if="modelInfo"
					class="device-scale-box"
					:style="{ width: fullObj.deviceWidth + 'px', height: fullObj.deviceHeight + 'px', transform: 'scale(' + fullObj.scale + ')' }"
				>
					<!-- 模型图 -->
					<image class="model-img" :src="baseUrl + modelInfo.imageUrl" mode="widthFix"></image>
					<!-- 端口数据 -->
					<view
						class="port-img-box"
						v-for="port in portList"
						:key="port.id"
						:style="{ left: port.locationX + 'px', top: port.locationY + 'px', transform: `rotate(${port.direction == 'top' ? 180 : 0}deg)` }"
						@click="showPortMenu(port)"
					>
						<!-- 端口图 -->
						<image class="port-img" :src="getPortImg(modelInfo.portType, port)" mode="widthFix" />
					</view>
				</view>
			</view>
			<view class="scale-screen" @click="handleScaleScreen()">
				<image class="screen-icon" src="../../static/images/device/exit_screen.png" mode=""></image>
				返回
			</view>
			<!-- 端口菜单 -->
			<view v-show="showMenu" class="port-menu-box" @click.self="closeMenu">
				<view class="menu-box">
					<view class="menu-title">
						端口编号： {{curPort.portIndex}}
					</view>
					<view class="menu-list">
						<view :class="['menu-item',curPort.status=='0'?'disabled-menu':'']" @click="menuOperate(1)">
							链路详情
						</view>
						<view class="menu-item" @click="menuOperate(2)">
							点亮指示灯
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs, watch, onMounted } from 'vue';
import config from '@/config.js'; // 配置文件
import { listDevicePort } from '@/service/device.js';

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/port/${name}.png`;
};

const modeName = {
	1: 'deviceModelImu',
	2: 'deviceModelSwitch',
	3: 'deviceModelDistributionFrame',
	5: 'deviceModelAp'
};
const statusList = [
	{
		name: '预占用',
		value: 1,
		color: '#FCF75F'
	},
	{
		name: '已占用',
		value: 4,
		color: '#12D7CB'
	},
	{
		name: '预释放',
		value: 2,
		color: '#3786EB'
	},
	{
		name: '非法占用',
		value: 3,
		color: '#F88811'
	},
	{
		name: '感应故障',
		value: 5,
		color: '#E63947'
	},
	{
		name: '连接器故障',
		value: 6,
		color: '#811919'
	}
];

const $props = defineProps({
	deviceInfo: {
		type: Object,
		default: () => {}
	}
});

watch(
	() => $props.deviceInfo,
	(newVal) => {
		if (newVal) {
			state.deviceData = newVal;
			state.modelInfo = state.deviceData[modeName[state.deviceData.deviceType]];
			getdevicePort();
			handleScale();
		}
	}
);

const state = reactive({
	baseUrl: '',
	deviceData: {},
	modelInfo: {},
	windowWidth: 0,
	windowHeight: 0,
	//正常缩放
	scaleObj: {
		deviceWidth: 500,
		deviceHeight: 50,
		scale: 1
	},
	//全屏缩放
	fullObj: {
		deviceWidth: 500,
		deviceHeight: 50,
		scale: 1,
		left: 0,
		top: 0
	},
	portList: [],//端口列表
	showFull: false,
	occupyRate: 0, //占用率
	showMenu: false,
	curPort: {}
});
const { baseUrl, deviceData, modelInfo, scaleObj, fullObj, portList, showFull, windowWidth, occupyRate, showMenu, curPort } = toRefs(state);

onMounted(() => {
	//生产环境
	// #ifdef APP
	state.baseUrl = config.base_url;
	// #endif
	// 开发环境，代理
	// #ifndef APP
	state.baseUrl = '/dev-api';
	// #endif
});

//获取设备端口
const getdevicePort = () => {
	listDevicePort({
		pageNum: 1,
		pageSize: 99,
		deviceId: state.deviceData.id,
		deviceType: state.deviceData.deviceType
	}).then((res) => {
		state.portList = Array.isArray(res.rows)?res.rows:[]
		let occupyPort = 0
		state.portList.forEach(item => {
			if(item.isUsed == 1){
				occupyPort++
			}
		})
		state.occupyRate = occupyPort? (occupyPort/state.portList.length*100).toFixed(2) : 0
	});
};

//根据设备尺寸缩放端口图显示比例
const handleScale = () => {
	setTimeout(() => {
		uni.getSystemInfo({
			success: (res) => {
				state.windowWidth = res.windowWidth;
				state.windowHeight = res.windowHeight;
				let paddingWidth = (50 / 375) * state.windowWidth;
				let curWidth = state.windowWidth - paddingWidth; //屏幕宽度减去padding等，计算模型图实际占据宽度
				if (state.deviceData.deviceType == 5) {
					state.scaleObj.deviceWidth = 70;
					state.scaleObj.deviceHeight = 70;
					state.scaleObj.scale = 1;
				} else {
					state.scaleObj.deviceWidth = 500;
					state.scaleObj.scale = curWidth / 500;
					let uHeight = state.modelInfo.uHeight ? state.modelInfo.uHeight : 1;
					state.scaleObj.deviceHeight = 50 * uHeight;
				}
			}
		});
	}, 200);
};

//判断端口状态贴图
const getPortImg = (portType = 1, port) => {
	let str = '';
	switch (portType * 1) {
		case 1:
			str = 'RJ45_';
			break;
		case 2:
			str = 'LC_';
			break;
		case 4:
			str = 'FC_';
			break;
		default:
			str = 'RJ45_';
			break;
	}
	return getImageUrl(str + port.status);
};

//计算全屏宽高
const handleFullScreen = () => {
	let paddingWidth = (35 / 667) * state.windowHeight;
	let curWidth = state.windowHeight - paddingWidth; //屏幕宽度减去padding等，计算模型图实际占据宽度
	state.fullObj.deviceWidth = 500;
	state.fullObj.scale = curWidth / state.fullObj.deviceWidth;
	let uHeight = state.modelInfo.uHeight ? state.modelInfo.uHeight : 1;
	state.fullObj.deviceHeight = 50 * uHeight;
	state.fullObj.left = (state.windowHeight - state.windowWidth) / 2;
	state.showFull = true;
};

//全屏返回
const handleScaleScreen = () => {
	state.showFull = false;
};

//点击端口图，打开端口功能菜单
const showPortMenu = (port) => {
	state.curPort = port
	state.showMenu = true
}

const closeMenu = () => {
	state.showMenu = false
}

const menuOperate = (type) => {
	if(type==1){
		//跳转链路详情页
		uni.navigateTo({
			url: `/pages/device/link-detail?deviceType=${$props.deviceInfo.deviceType}&deviceId=${$props.deviceInfo.id}&portIndex=${state.curPort.portIndex}`
		})
	}
}
</script>

<style lang="scss" scoped>
.port-detail {
	width: 100%;
	height: 100%;
	position: relative;
	.port-usage {
		box-sizing: border-box;
		width: 100%;
		height: 114rpx;
		padding: 0 37rpx;
		background: #f3f8ff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		.usage-text {
			font-size: 24rpx;
			color: #282d3f;
		}
		.usage-value {
			color: #2c5ae9;
			font-weight: bold;
			.value-num {
				font-size: 60rpx;
			}
			.value-unit {
				font-size: 28rpx;
			}
		}
	}
	.device-port,
	.full-box {
		box-sizing: border-box;
		width: 100%;
		background-color: #e0e4eb;
		.device-scale-box {
			transform-origin: 0% -50%;
			position: absolute;
			top: 50%;
			.model-img {
				width: 100%;
			}
			.port-img-box {
				width: 16px;
				position: absolute;
			}
			.port-img {
				display: block;
				width: 100%;
			}
		}
		.full-screen,
		.scale-screen {
			width: 144rpx;
			height: 66rpx;
			background: #ffffff;
			box-shadow: 0rpx -3rpx 25rpx 0rpx rgba(25, 67, 124, 0.09);
			border-radius: 8rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.6);
			font-size: 23rpx;
			color: #282d3f;
			display: flex;
			justify-content: center;
			align-items: center;
			.screen-icon {
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}
		}
	}
	.device-port {
		height: calc(100% - 250rpx);
		padding: 20rpx;
		border-radius: 4rpx;
		margin-bottom: 40rpx;
		position: relative;
		.full-screen {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
		}
	}
	.full-box {
		width: calc(100vh + 2px);
		height: calc(100vw + 2px);
		padding: 50rpx;
		transform: rotate(90deg);
		position: fixed;
		top: 0;
		left: 0;
		.device-name {
			height: 41rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
			color: #262d37;
			line-height: 41rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.full-content {
			position: relative;
		}
		.scale-screen {
			position: fixed;
			right: 20rpx;
			bottom: 50rpx;
		}
		.port-menu-box{
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.menu-box{
				width: 250rpx;
				border-radius: 8rpx;
				background-color: #fff;
				.menu-title{
					font-size: 30rpx;
					line-height: 50rpx;
					text-align: center;
					border-bottom: 1px solid #666;
				}
				.menu-list{
					padding: 0 20rpx;
					.menu-item{
						width: 100%;
						height: 50rpx;
						font-size: 28rpx;
						line-height: 50rpx;
						border-bottom: 1px solid #dedede;
					}
					.disabled-menu{
						color: #999;
						text-decoration: line-through;
					}
				}
			}
		}
	}
	.status-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.status-item {
			box-sizing: border-box;
			width: 33%;
			height: 30rpx;
			margin-bottom: 10rpx;
			padding-left: 40rpx;
			display: flex;
			align-items: center;
			font-size: 19rpx;
			color: #6e84b1;
			.status-sign {
				width: 21rpx;
				height: 21rpx;
				border: 1rpx solid #7080a2;
				margin-right: 8rpx;
			}
		}
	}
}
</style>